<template>
	<view style="height: 400rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {};
		},
		mounted() {
			this.$refs.chart.init(echarts, (chart) => {
				let option = option = {
					legend: false,
					xAxis: [{
						type: 'category',
						data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12'],
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
							type: 'value',
							min: 0,
							max: 250,
							axisLine: {
								show: false
							},
							minorTick: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							},
							splitLine: {
								show: false
							},
						},
						{
							type: 'value',
							min: 0,
							max: 250,
							axisLine: {
								show: false
							},
							minorTick: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							},
							splitLine: {
								show: false
							},
						}
					],
					series: [{
							name: 'Evaporation',
							type: 'bar',
							data: [
								15, 12, 23, 54, 84, 250, 24, 51, 21, 12, 14, 250
							],
							color: ['#F2F3FD']
						},
						{
							name: 'Temperature',
							type: 'line',
							yAxisIndex: 1,
							data: [
								15, 12, 23, 54, 84, 250, 24, 51, 21, 12, 14, 250
							],
							smooth: true,
							color: ['#FE4747']
						}
					]
				};
				chart.setOption(option);
			});
		},
	};
</script>